<template>
  <div id="container">
    <GlassIcons :items="items" />
  </div>
</template>

<script setup lang="ts">
import EyeDropperIcon from "@renderer/components/Icon/tools/EyeDropperIcon.vue";
import ClockIcon from "@renderer/components/Icon/tools/ClockIcon.vue";

const router = useRouter();

interface GlassIconsItem {
  icon: any;
  color: "blue" | "purple" | "red" | "indigo" | "orange" | "green";
  label: string;
  customClass?: string;
  click: () => void;
}

// 按钮点击事件
const openEyeDropper = async () => {
  router.replace({ path: "/tools/eyeDropper" });
};
const openClock = async () => {
  router.replace({ path: "/tools/clock" });
};

// GlassIcons的目录
const items: GlassIconsItem[] = [
  { icon: EyeDropperIcon, color: "blue", label: "取色器", click: openEyeDropper },
  { icon: ClockIcon, color: "purple", label: "计时器", click: openClock },
];
</script>

<style lang="scss" scoped>
#container {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
</style>
